<template>
  <div>
    {{ myValue }}
    <MyInput v-model="myValue"></MyInput>

    <!-- <tab-bar :list="list" v-model="active"></tab-bar> -->

    <MyTabs v-model="active">
      <my-tab title="标题一">内容1</my-tab>
      <my-tab title="标题二">内容2</my-tab>
      <my-tab title="标题三">内容3</my-tab>
      <my-tab title="标题四">内容4</my-tab>
    </MyTabs>
  </div>
</template>

<script>
/**
 * value / input 合起来封装好的一个 v-model
 * v-model 使用在自定义组件上
 */
import MyInput from './coms/MyInput.vue'
import TabBar from './coms/tab-bar.vue'
import MyTabs from './coms/my-tabs.vue'
import MyTab from './coms/my-tab.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  components: { MyInput, TabBar, MyTabs, MyTab },
  data() {
    return {
      myValue: '12',
      list: ['正在上演', '即将上演'],
      active: 0,
    }
  },
  computed: {
    // ...mapState(['active']),
  },
  methods: {
    ...mapMutations(['set_myActive']),
  },
  watch: {
    active(v) {
      console.log('active:', v)
      this.set_myActive(v)
    },
  },
}
</script>

<style></style>
